---
title: App Verktygstips
image: /images/user-guide/tips/light-bulb.png
---

<Frame>
  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
</Frame>

Ett kortfattat meddelande som visar ytterligare information när en användare interagerar med ett element.

<Tabs>
<Tab title="Usage">

```jsx
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Customer Insights
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Explore customer behavior and preferences"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};
```

</Tab>

<Tab title="Props">

| Egenskaper        | Typ                                            | Beskrivning                                                                                                                                                                                                          |
| ----------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className         | string                                         | Valfri CSS-klass för ytterligare stil                                                                                                                                                                                |
| anchorSelect      | CSS-väljare                                    | Väljare för tooltip-ankaret (det element som utlöser tooltipen)                                                                                                                                   |
| innehåll          | string                                         | The content you want to display within the tooltip                                                                                                                                                                   |
| fördröjDölj       | nummer                                         | The delay in seconds before hiding the tooltip after the cursor leaves the anchor                                                                                                                                    |
| förskjutning      | nummer                                         | Förskjutningen i pixlar för placering av verktygstipset                                                                                                                                                              |
| noArrow           | boolean                                        | Om `true`, göms pilen på verktygstipset                                                                                                                                                                              |
| ärÖppen           | boolean                                        | Om `true`, är verktygstipset öppet som standard                                                                                                                                                                      |
| plats             | `PlacesType` sträng från `react-tooltip`       | Anger placeringen av verktygstipset. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end` |
| positionsStrategi | `PositionStrategy` sträng från `react-tooltip` | Positionsstrategi för verktygstipset. Har två värden: `absolut` och `fast`                                                                                                           |

</Tab>

</Tabs>

## Överskjutande Text med Tooltip

Hanterar överskjutande text och visar ett verktygstips när texten överskrider.

<Tabs>
<Tab title="Usage">

```jsx
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
```

</Tab>

<Tab title="Props">

| Egenskaper | Typ    | Beskrivning                                             |
| ---------- | ------ | ------------------------------------------------------- |
| text       | string | Innehållet du vill visa i det överskjutande textområdet |

</Tab>

</Tabs>
